<template>
  <div class="p1755850745" style="background-color: #F7F8F8;">
    <uv-sticky bgColor="#fff">
      <div style="height: 1px;background: #EFEFEF;width:100%"></div>
      <uv-tabs :scrollable="false" :inactiveStyle="{color: '#333'}" :activeStyle="{color: '#9FA0A0'}" lineColor="#E60012" @click="tabClick" :list="list"></uv-tabs>
    </uv-sticky>
    <div v-for="(item, index) in list" :key="index">
      <u-list-item v-if="currentIndex == item.status" :ref="'listItemVue-' +  item.status"></u-list-item>
    </div>
    <div class="bfff">
      <uv-safe-bottom></uv-safe-bottom>
    </div>
  </div>
</template>

<script>
import listItemVue from '@/pages-worker/components/listItem.vue'
import myLayOutVue from "./components/layOut.vue";
export default {
  components: {
    "u-my-layOut": myLayOutVue,
    'u-list-item': listItemVue
  },
  data() {
    return {
      height: 0,
      routeQuery: {},
      currentIndex: 0,
      form: {
        page: 1,
        limit: 60,
        status: 0
      },
      list: [{
        name: '全部',
        status: 0
      }, {
        name: '待支付',
        status: 1
      }, {
        name: '待收货/服务中',
        status: 2
      }, {
        name: '待评价',
        status: 3
      }, {
        name: '退款',
        status: 5
      }],
      scrollTop: 0, // 记录页面滚动距离
      isRefreshing: false // 防止重复刷新
    }
  },
  onLoad(options) {
    if (options) this.routeQuery = options
    uni.getSystemInfo({
      success: (res) => {
        this.height = res.safeArea.top
      }
    });
  },

  onPullDownRefresh() {
    // uni.startPullDownRefresh();
    //   uni.stopPullDownRefresh();
    // if (this.scrollTop <= 0 && !this.isRefreshing) {
    //   this.isRefreshing = true;
    //   // this.tabClick({ status: this.currentIndex })
    //   uni.stopPullDownRefresh();
    // } else {
    //   uni.stopPullDownRefresh();
    // }
  },
  onShow() {
    // 0=全部，1=未支付，2=待收货/待服务，3=待评价，5=退款
    this.tabClick({
      status: this.currentIndex
    })
  },
  methods: {
    resDataChange() {
      this.isRefreshing = false;
      // uni.stopPullDownRefresh();

    },
    tabClick(value) {
      this.currentIndex = value.status
      // this.currentIndex = value.status
      this.$nextTick(() => {
        if (this.$refs['listItemVue-' + value.status]) {
          this.$refs['listItemVue-' + value.status][0]._clearAll()
          this.$refs['listItemVue-' + value.status][0].initPage(value.status)
        }
      })
    }
  },
}
</script>

<style lang="scss">
page {
  background-color: rgb(247, 248, 248);
}
</style><style lang="scss" scoped>
@import "./common.scss";

.p1755850745 {
  box-sizing: border-box;
}

.p1755839504 {
  width: calc(33.33333% - 16rpx) !important;
  position: relative;
}

.p1755839504:nth-child(2) {
  margin: 0 24rpx;
}

.p1755839504-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p1755839435 {
  display: flex;
  width: 100%;
}

.p1755839504::before {
  display: block;
  content: "";
  padding-bottom: 100%;
}
</style>
